type Props = {
  width?: number;
  height?: number;
  className?: string;
};

export const AzureIcon = ({ width = 64, height = 64, className }: Props) => (
  <div
    aria-label="Azure"
    className={`flex items-center justify-center rounded-full ${className || ''}`}
    style={{
      backgroundColor: 'rgb(255, 255, 255)',
      color: 'rgb(255, 255, 255)',
      height: `${height}px`,
      width: `${width}px`,
    }}
  >
    <svg
      width={width * 0.7}
      height={height * 0.7}
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      color="#fff"
      style={{ flex: '0 0 auto', lineHeight: '1' }}
      fill="currentColor"
    >
      <title>Azure</title>
      <path
        d="M7.242 1.613A1.11 1.11 0 018.295.857h6.977L8.03 22.316a1.11 1.11 0 01-1.052.755h-5.43a1.11 1.11 0 01-1.053-1.466L7.242 1.613z"
        fill="url(#lobe-icons-azure-fill-0)"
      ></path>
      <path d="M18.397 15.296H7.4a.51.51 0 00-.347.882l7.066 6.595c.206.192.477.298.758.298h6.226l-2.706-7.775z" fill="#0078D4"></path>
      <path d="M15.272.857H7.497L0 23.071h7.775l1.596-4.73 5.068 4.73h6.665l-2.707-7.775h-7.998L15.272.857z" fill="url(#lobe-icons-azure-fill-1)"></path>
      <path
        d="M17.193 1.613a1.11 1.11 0 00-1.052-.756h-7.81.035c.477 0 .9.304 1.052.756l6.748 19.992a1.11 1.11 0 01-1.052 1.466h-.12 7.895a1.11 1.11 0 001.052-1.466L17.193 1.613z"
        fill="url(#lobe-icons-azure-fill-2)"
      ></path>
      <defs>
        <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-azure-fill-0" x1="8.247" x2="1.002" y1="1.626" y2="23.03">
          <stop stopColor="#114A8B"></stop>
          <stop offset="1" stopColor="#0669BC"></stop>
        </linearGradient>
        <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-azure-fill-1" x1="14.042" x2="12.324" y1="15.302" y2="15.888">
          <stop stopOpacity=".3"></stop>
          <stop offset=".071" stopOpacity=".2"></stop>
          <stop offset=".321" stopOpacity=".1"></stop>
          <stop offset=".623" stopOpacity=".05"></stop>
          <stop offset="1" stopOpacity="0"></stop>
        </linearGradient>
        <linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-azure-fill-2" x1="12.841" x2="20.793" y1="1.626" y2="22.814">
          <stop stopColor="#3CCBF4"></stop>
          <stop offset="1" stopColor="#2892DF"></stop>
        </linearGradient>
      </defs>
    </svg>
  </div>
);
